<template>
    <div class="detail">
        <div class="banner_box">
            <img :src="detailData.image" alt="">
        </div>
        <h5>{{detailData.title}}</h5>
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/layout/cart')"/>
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="addToCart"/>
            <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
        return {
            detailData: {},
            id: null,
        }
    },
    computed: {
        ...mapState('user', ['userData'])
    },
    created() {
        this.init()
    },
    methods:{
        init() {
            this.id =this.$route.params.id;
            this.getDetail(this.id)
        },
        getDetail(id) {
            this.$api.getShopDetail(id).then(res=>{
                if(res.code===1) {
                    this.detailData = res.data[0];
                    console.log(this.detailData)
                }else{
                    alert(res.message)
                }
            })
        },
        addToCart() {
            this.$api.addToCart({
                user_id: this.userData.data.id,
                shop_id: this.id
            }).then(res=>{
                console.log(res)
            })
        }
    }
}
</script>

<style lang='scss'>
.detail{
    height: 100%;
    .banner_box{
        width:100%;
        height:300px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
            img{
                width:100%;
                height: 100%;
                display: inline-block;;
            }
    }
}
</style>